<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div id="app">

    <el-input style="width: 20%" v-model="tableName" placeholder="请输入表名"></el-input>
    <el-button class="filter-item" type="primary" style="margin-left:10px" @click="handleFilter">查找</el-button>
    <el-table
            :data="data"
            border
            element-loading-test="正在查询中。。。"
            style="width: 100%">
        <el-table-column align="center" label="表名" prop="tableName" sortable></el-table-column>
        <el-table-column align="center" label="备注" prop="tableComment"></el-table-column>
        <el-table-column align="center" label="创建时间" prop="createTime" sortable></el-table-column>
        <el-table-column align="center" label="操作" class-name="small-padding fixed-width">
            <template slot-scope="scope">
                <el-button type="primary" size="mini" @click="handleGen(scope.row)">详情</el-button>
            </template>
        </el-table-column>
    </el-table>


    <!-- 详情对话框 -->
    <el-dialog :visible.sync="dialogFormVisible" title="详情" width="580px">
        <el-form
                ref="dataForm"
                :model="dataForm"
                label-position="left"
                label-width="120px"
                style="width: 400px; margin-left:50px;">
            <el-form-item label="表名" prop="tableName">
                <el-input v-model="dataForm.tableName" type="input" disabled auto-complete="off"/>
            </el-form-item>
            <el-form-item label="类名" prop="className">
                <el-input v-model="dataForm.className" type="input" auto-complete="off"/>
            </el-form-item>
            <el-form-item label="工程路径" prop="packagePath">
                <el-input v-model="dataForm.projectPath" type="input" auto-complete="off"/>
            </el-form-item>
            <el-form-item label="包路径" prop="packagePath">
                <el-input v-model="dataForm.packagePath" type="input" auto-complete="off"/>
            </el-form-item>
            <el-form-item label="模块名" prop="moduleName">
                <el-input v-model="dataForm.moduleName" type="input" auto-complete="off"/>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="doGen">生成至工程目录</el-button>
            <el-tooltip class="item" effect="dark" content="下载后请用压缩工具打开" placement="top-start">
                <el-button type="primary" @click="download">下载到本地</el-button>
            </el-tooltip>
            <el-button @click="dialogFormVisible = false">取消</el-button>
        </div>
    </el-dialog>
</div>
</body>
<!-- import Vue before Element -->
<script src="./js/vue.js"></script>
<!-- import JavaScript -->
<script src="./js/index.js"></script>
<script src="./js/axios.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                data: [],
                tableName: null,
                url: 'generator/',
                dataForm: {
                    tableName: null,
                    className: null,
                    projectPath: null,
                    packagePath: null,
                    moduleName: null
                },
                dialogFormVisible: false
            }
        },
        created() {
            this.$nextTick(() => {
                    this.init()
                }
            )
        },
        methods: {
            init() {
                let params = {}
                if (this.tableName) {
                    params['tableName'] = this.tableName
                }
                axios.get(this.url, {params}).then((data) => {
                    this.data = data.data
                })
            },
            handleFilter() {
                this.init()
            },
            resetForm() {
                this.dataForm = {
                    tableName: null,
                    className: null,
                    projectPath: null,
                    packagePath: null,
                    moduleName: null
                }
            },
            handleGen(row) {
                this.resetForm()
                this.dialogFormVisible = true
                axios.get(this.url + row.tableName).then(data => {
                        this.dataForm = data.data
                    }
                )
            },
            doGen() {
                axios.post(this.url, this.dataForm).then(data => {
                    this.dialogFormVisible = false
                    if (data.data === 'success'
                    ) {
                        this.$notify({
                            title: '成功',
                            message: '操作成功',
                            type: 'success',
                            duration: 2000
                        })
                    } else {
                        this.$notify({
                            title: '失败',
                            message: '操作失败',
                            type: 'fail',
                            duration: 2000
                        })
                    }
                })
            },
            download() {
                axios({
                    method: 'post',
                    url: this.url + 'download',
                    data: this.dataForm,
                    responseType: 'arraybuffer'
                }).then(res => {
                    let blob = new Blob([res.data], {type: 'application/octet-stream;charset=UTF-8'})
                    window.location.href = URL.createObjectURL(blob)
                })
            }
        }
    })
</script>
</html>